<template>
  <div ref="barChartRef" :style="{ width, height }"></div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watchEffect } from 'vue'
import useEcharts from '@/hooks/web/useEcharts'

export default defineComponent({
  name: 'BarChart',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '280px'
    }
  },
  setup() {
    const barChartRef = ref<HTMLElement>()

    onMounted(() => {
      const { setOptions, echarts } = useEcharts(barChartRef.value!)

      watchEffect(() => {
        setOptions({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
          xAxis: {
            type: 'category',
            data: [
              '1月',
              '2月',
              '3月',
              '4月',
              '5月',
              '6月',
              '7月',
              '8月',
              '9月',
              '10月',
              '11月',
              '12月'
            ]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
              type: 'bar',
              barWidth: '40%',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#fbc2eb' },
                  { offset: 1, color: '#a6c1ee' }
                ])
              }
            }
          ]
        })
      })
    })

    return {
      barChartRef
    }
  }
})
</script>

<style scoped></style>
